<template>
  <div class="layout">
    <loading :state="loading"/>
    <div class="space"></div>
    <div class="recipients-container">
      <div style="flex: 1;">
        <div class="flex-r">
          <span class="nm">昵称：{{detail.nick}}</span>
          <span class="receiver" v-if="!frozen">收货人名称：{{detail.userIdentity}}</span>
          <span class="receiver" v-if="frozen">暂未收货</span>
        </div>
        <div class="flex-r">
          <span class="idtime">订单号：{{detail.nid}}</span>
          <span class="date" v-text="dateFormat"></span>
        </div>
      </div>
    </div>
    <div class="space"></div>
    <div class="title">
      <item-goods-order
        v-for="(res,index) in goods"
        :key="index"
        :title="res.name"
        :products="res.products"/>
    </div>
    <div class="space"></div>
    <div class="flex-r" style="background-color: white;height: 10vw; border-radius: 1.333333333333333vw">
      <span class="text">商品金额</span>
      <span class="total-price">{{detail.money}}元</span>
    </div>
    <div class="divider"></div>
    <div class="flex-r" style="background-color: white;height: 10vw; border-radius: 1.333333333333333vw">
      <span class="text">收到返利</span>
      <span class="total-price">
        {{detail.rebate}}元
        <span v-if="frozen">（冻结中）</span>
      </span>
    </div>
    <div class="space"></div>
    <span class="frozen" v-if="frozen">由于顾客暂未确认收货，返利处于冻结状态。</span>
  </div>
</template>

<script type="text/ecmascript-6">
  import ItemGoodsOrder from '../../components/user/ItemGoodsOrder';
  import Moment from 'moment';

  export default {
    /** kebab-case */
    name: 'orderDetail',

    data() {
      return {
        loading: true,
        pupData: {
          des: '确认',
          cancel: '取消',
          sure: '确定'
        }, // 弹窗提示文字
        orderState: '',
        detail: {}, // 数据主体
        goods: {}, // 商品信息,
        frozen: ''
      };
    },

    components: {
      ItemGoodsOrder
    },

    methods: {
      getDetail() {
        let orderId = this.$route.query.id;
        this.$UserReq.getRebateOrderDetail({id: orderId}).then(res => {
          console.log('getDetailgetDetail--res:', res);
          this.loading = false;
          let dataMind = res.data;
          this.orderState = dataMind.status;
          this.detail.nick = dataMind.nick; // 昵称
          this.detail.userIdentity = dataMind.recUser; // 收货人
          this.detail.nid = dataMind.id; // 订单号
          this.detail.created = dataMind.created; // 创建时间
          this.detail.money = dataMind.money; // 总额
          this.detail.rebate = dataMind.rebate.money; // 返利
          this.goods = dataMind.list;
          this.frozen = dataMind.rebate.isFrozen;
          console.log(this.detail.created, 'detail.created', this.detail.rebate, this.frozen);
        });
      }
    },
    computed: {
      dateFormat() {
        return Moment(this.detail.created).format('YYYY-MM-DD HH:mm');
        // return new Date(this.detail.created).toLocaleString();
      }
    },
    watch: {
      // 监听具体数据变化，并做相应的处理
    },
    created() {
      this.getDetail();
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl";
  .flex-r
    flex-x()
    border-radius vw(5)

  .flex-c
    flex-y()

  .center
    flex-center()

  .divider
    divider()
    width vw(345)

  .space
    space()
  .layout
    width vw(345)
    margin vw(15)

  .recipients-container
    width vw(345)
    height vw(68)
    border-radius vw(5)
    background-color white

  .time
    word-tip()

  .txt
    word-big()

  .text
    word-vw(16, first-ash)
    margin-left 10px

  .total-price
    word(14px, main-color)
    margin-right 10px

  .address
    word-tip()
    display block
    word-break break-all
    word-wrap break-word
    margin-top 1vw

  .nm
    word(14, first-ash)
    height vw(19)
    line-height vw(19)
    margin-top vw(10)
    margin-left vw(10)
  .receiver
    word(14, first-ash)
    position absolute
    height vw(19)
    line-height vw(19)
    right vw(25)

  .idtime
    word(14, third-ash)
    height vw(19)
    line-height vw(19)
    margin-top vw(10)
    margin-left vw(10)
  .date
    position absolute
    word(14, third-ash)
    height vw(19)
    line-height vw(19)
    right vw(25)
  .bar
    height 10vw
    flex-x()
    justify-content space-between
    padding 0 10px 0 0

  .refundable-txt
    word-vw(12, main-color)

  .back-txt
    word-vw(12, third-ash)

  .footer
    height 14vw
    width 100vw
    flex-center()
    justify-content space-around
    position fixed
    bottom 0
    background-color bk-color
  .frozen
    word-vw(12, third-ash)
    position absolute
    right vw(15)
</style>
